<template>
  <div class="app-container">
    <el-tabs type="border-card" :value="activeTab" @tab-click="changeTab">
      <el-tab-pane v-if="roleCheck('list')" name="one" label="活动数据">
        <list v-show="activeTab === 'one'"></list>
      </el-tab-pane>
      <el-tab-pane v-if="roleCheck('award-search')" name="two" label="奖励查询">
        <award-search v-show="activeTab === 'two'"></award-search>
      </el-tab-pane>
      <el-tab-pane v-if="roleCheck('config')" name="three" label="活动配置">
        <config v-show="activeTab === 'three'"></config>
      </el-tab-pane>
      <el-tab-pane v-if="roleCheck('assign-award-tab')" name="four" label="指定中奖">
        <assign-award v-show="activeTab === 'four'"></assign-award>
      </el-tab-pane>
      <el-tab-pane v-if="roleCheck('assign-jackpot')" name="five" label="奖池分配">
        <assign-jackpot v-show="activeTab === 'five'"></assign-jackpot>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { tabs } from '@/build';
import list from './list';
import awardSearch from './awardSearch';
import config from './config';
import assignAward from './assignAward';
import assignJackpot from './assignJackpot';

export default {
  name: 'index',
  components: {
    list,
    awardSearch,
    config,
    assignAward,
    assignJackpot,
  },
  mixins: [tabs],
  data() {
    return {
      activeTab: 'one',
    };
  },
  mounted() {
    if (this.roleCheck('list')) {
      this.activeTab = 'one';
    } else if (this.roleCheck('award-search')) {
      this.activeTab = 'two';
    } else if (this.roleCheck('config')) {
      this.activeTab = 'three';
    } else if (this.roleCheck('assign-award-tab')) {
      this.activeTab = 'four';
    } else if (this.roleCheck('assign-jackpot')) {
      this.activeTab = 'five';
    }
  },
  methods: {
    changeTab(tabs) {
      this.activeTab = tabs.name;
    },
  },
};
</script>

<style scoped>

</style>
